<template>
  <el-dialog v-model="dialogVisible" title="修改">
    <!-- 添加表单内容 -->
    <el-form :model="formData" label-width="120px">
      <el-form-item label="名称">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="权限类型">
        <el-select v-model="formData.permissionType" placeholder="请选择">
          <el-option
            v-for="item in permissionTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 部门选择下拉框 -->
      <el-form-item label="选择部门" v-if="formData.permissionType === 1">
        <el-select v-model="formData.refId" placeholder="请选择部门">
          <el-option
            v-for="item in depList"
            :key="item.did"
            :label="item.dname"
            :value="item.did"
          />
        </el-select>
      </el-form-item>
      
      <!-- 员工选择下拉框 -->
      <el-form-item label="选择员工" v-if="formData.permissionType === 2">
        <el-select v-model="formData.refId" placeholder="请选择员工">
          <el-option-group
            v-for="group in depEmpList"
            :key="group.deptName"
            :label="group.deptName"
          >
            <el-option
              v-for="emp in group.empList"
              :key="emp.eid"
              :label="emp.ename"
              :value="emp.eid"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
	
	  
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import req from '@/request'
import { ElMessage } from 'element-plus'

import { computed } from 'vue'

// 当前选中的部门名称
const selectedDeptName = computed(() => {
  if (formData.permissionType !== 1) return ''
  const dept = depList.value.find(item => item.did === formData.refId)
  return dept ? dept.dname : ''
})

// 当前选中的员工名称
const selectedEmpName = computed(() => {
  if (formData.permissionType !== 2) return ''
  for (const group of depEmpList.value) {
    const emp = group.empList.find(item => item.eid === formData.refId)
    if (emp) return emp.ename
  }
  return ''
})

const dialogVisible = ref(false)
const formData = reactive({
  type:"",
  id: "",
  name: "",
  permissionType: "",
  refId: ""
})

const emit = defineEmits(['udp-ok'])

const permissionTypeOptions = [
  { value: 0, label: '全部可见' },
  { value: 1, label: '部门可见' },
  { value: 2, label: '某个人可见' },
  { value: 3, label: '自己可见' }
]

const open = (data) => {
  dialogVisible.value = true
  Object.assign(formData, data)
  
  // 根据当前权限类型设置默认选中值
  if (formData.permissionType === 1) {
    // 部门权限，确保refId是数字类型（如果后端返回的是字符串）
    formData.refId = Number(formData.refId)
  } else if (formData.permissionType === 2) {
    // 个人权限，确保refId是字符串
    formData.refId = String(formData.refId)
  }
  
  console.log("修改数据：", formData)
}

const submitForm = async () => {
  try {
    let apiUrl = '';
    let requestData = {
      id: formData.id,
      name: formData.name,
      permissionType: formData.permissionType,
      refId: formData.refId
    };

    // 根据 type 值选择不同的接口
    if (formData.type === 1) {
      apiUrl = '/file/update';
    } else if (formData.type === 2) {
      apiUrl = '/folder/update';
    } else {
      ElMessage.warning('未知的操作类型');
      return;
    }

    // 发送请求
    const res = await req.post(apiUrl, requestData);
    
    if (res.code === 200) { // 假设成功返回 code 200
      dialogVisible.value = false;
      ElMessage.success('修改成功');
      // 可以在这里触发父组件刷新数据
	  emit('udp-ok')
      // emit('success');
    } else {
      ElMessage.error(res.message || '修改失败');
    }
  } catch (error) {
    console.error('修改出错:', error);
    ElMessage.error('修改出错，请稍后重试');
  }
}
// 部门员工信息
const depEmpList = ref([])
const getDepEmpList = async () => {
  const res = await req.get('/info/emp/dept/detail')
  depEmpList.value = res.data
  console.log("修改部门员工信息:",depEmpList.value)
}
getDepEmpList()

// 部门信息
const depList = ref([])
const getDepList = async () => {
  const res = await req.get('/info/emp/dep')
  depList.value = res.data
  console.log("修改部门信息:",depList.value)
}
getDepList()

defineExpose({
  open
})
</script>